<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
      @if (object?.id) {
        <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
      }
      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
      </button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-4">
          <pngx-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></pngx-input-text>
          <pngx-input-text i18n-title title="Email" formControlName="email" [error]="error?.email"></pngx-input-text>
          <pngx-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></pngx-input-password>
          <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
          <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>

          <div class="mb-2 d-flex flex-column">
            <div class="form-check form-switch form-check-inline">
              <input type="checkbox" class="form-check-input" id="is_active" formControlName="is_active">
              <label class="form-check-label" for="is_active" i18n>Active</label>
            </div>
            <div class="form-check form-switch form-check-inline">
              <input type="checkbox" class="form-check-input" id="is_staff" formControlName="is_staff">
              <label class="form-check-label" for="is_staff"><ng-container i18n>Admin</ng-container> <small class="form-text text-muted ms-1" i18n>Access logs, Django backend</small></label>
            </div>
            <div class="form-check form-switch form-check-inline">
              <input type="checkbox" class="form-check-input" id="is_superuser" formControlName="is_superuser" (change)="onToggleSuperUser()">
              <label class="form-check-label" for="is_superuser"><ng-container i18n>Superuser</ng-container> <small class="form-text text-muted ms-1" i18n>(Grants all permissions and can view objects)</small></label>
            </div>
          </div>

          <pngx-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></pngx-input-select>

          @if (object?.is_mfa_enabled && currentUserIsSuperUser) {
            <label class="form-label" i18n>Two-factor Authentication</label>
            <pngx-confirm-button
              label="Disable Two-factor Authentication"
              i18n-label
              title="Disable Two-factor Authentication"
              i18n-title
              buttonClasses="btn-outline-danger btn-sm"
              iconName="trash"
              [disabled]="totpLoading"
              (confirm)="deactivateTotp()">
            </pngx-confirm-button>
          }
        </div>
        <div class="col">
          <pngx-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></pngx-permissions-select>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
    </div>
  </form>
